<script setup lang="ts">
import PriceChart from "~/contentScripts/views/tao/shopCategory/priceChart.vue";
import CategoryChart from "~/contentScripts/views/tao/shopCategory/categoryChart.vue";
import SaleComponent from "~/contentScripts/views/tao/shopCategory/saleComponent.vue";
import Shop from "~/utils/ali/shop";
import { analysisType } from "~/contentScripts/views/tao/shopCategory/analysis";
const page = ref(1)
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const dataSource = ref<analysisType[]>([])
const emit = defineEmits(['update:visible'])
const hasCategory = ref(true)
const activeKey = ref('category')
const columns = ref([
  {
    dataIndex: 'itemName',
    title: '商品名称',
    width: '200px',
    fixed: 'left',
    dataType: 'product',
    dataField: {
      item_id: 'itemId',
      item_title: 'itemName',
      item_pic: 'itemPic',
      item_price: 'price',
    },
  },
  {
    dataIndex: 'categoryId',
    title: '商品类目',
    width: '120px',
    dataType: 'category',
    tooltip:true,
    sorter: {compare: (a:analysisType, b:analysisType) => parseInt(a.categoryId) - parseInt(b.categoryId)},
  },
  {
    dataIndex: 'price',
    title: '商品价格',
    width: '120px',
    sorter: {compare: (a:analysisType, b:analysisType)=> parseInt(a.price) - parseInt(b.price)},
  },
  // {
  //   dataIndex: 'monthSale',
  //   title: '月销量(估)',
  //   width: '120px',
  //   sorter: {compare: (a:analysisType, b:analysisType) => parseInt(a.monthSale) - parseInt(b.monthSale)},
  // },
  // {
  //   dataIndex: 'totalSale',
  //   title: '总销量(估)',
  //   width: '120px',
  //   sorter: {compare: (a:analysisType, b:analysisType) => a.totalSale - b.totalSale},
  // },
  // {
  //   dataIndex: 'commentNum',
  //   title: '评论人数',
  //   width: '120px',
  //   sorter: {compare: (a, b) => a.commentNum - b.commentNum},
  // },
  {
    dataIndex: 'collectNum',
    title: '收藏人数',
    width: '120px',
    sorter: {compare: (a:analysisType, b:analysisType) => a.collectNum - b.collectNum},
  }
])
const onLoaded = ref(false)
const onLoading = ref(false)
const totalPage = ref(1)
const loadData = () => {
  if (!onLoading.value) {
    return;
  }
  Shop.search(page.value).then(res => {
    if (res) {
      console.log("🚀 ~ Shop.search ~ res:", res)
      res.results.map(item => {
        if (item.categoryId) {
          hasCategory.value = true
        }
      })
      if (!hasCategory.value && activeKey.value === 'category') {
        activeKey.value = 'price'
      }
      totalPage.value = +res.totalPage
      dataSource.value.push(...res.results);
      page.value++;
      if (page.value <= +res.totalPage) {
        setTimeout(() => {
          loadData();
        }, 3000);
      } else {
        onLoaded.value = true
        onLoading.value = false
      }
    } else {
      onLoading.value = false
    }
  });
}
const close = () => {
  // console.log('close')
  emit('update:visible', false)
}
const reLoad = () => {
  onLoading.value = true
  onLoaded.value = false
  dataSource.value = [];
  page.value = 1
  loadData();
}
watch(() => props.visible, (val) => {
  if (val) {
    activeKey.value = 'category'
    onLoading.value = true
    onLoaded.value = false
    dataSource.value = [];
    page.value = 1
    loadData();
  }
})
</script>

<template>
  <a-modal title="店铺分析" style="top: 20px;" width="95%" :footer="null" :visible="visible" @cancel="emit('update:visible',false)">
    <a-tabs style="margin-top: -10px;" destroy-inactive-tab-pane>
      <a-tab-pane tab="类目分析" key="category" v-if="hasCategory">
        <category-chart :data-source="dataSource"/>
      </a-tab-pane>
      <a-tab-pane tab="价格分析" key="price">
        <price-chart :data-source="dataSource"/>
      </a-tab-pane>
      <a-tab-pane tab="销量分析" key="sale">
        <sale-component :data-source="dataSource"/>
      </a-tab-pane>
      <!--      加载状态-->
      <template #rightExtra>
        <div style="color: #666666;font-size: 12px;display: inline-block;line-height: 2;padding-right: 10px;">
          （{{ page - 1 }}/{{ totalPage }}），已加载 {{ dataSource.length }} 个商品
        </div>
        <a-button v-if="onLoading" size="small" type="primary" @click="onLoading=false">暂停加载</a-button>
        <a-button v-else-if="!onLoaded && !onLoading" size="small" type="primary"
                  @click="()=>{onLoading=true;loadData();}"
        >继续加载
        </a-button>
        <a-button v-else size="small" @click="reLoad()">重新加载</a-button>
      </template>
    </a-tabs>
    <div style="height: 10px;"/>
    <base-table :scroll="{
      y: 400
    }" table-name="店铺分析" size="small" :columns="columns" :data-source="dataSource">

    </base-table>
  </a-modal>
</template>

<style scoped>

</style>
